/*----------------------------------------*\
  SEPARATOR
\*----------------------------------------*/

.separator {
  @apply block h-auto border-0;
}

.separator::before {
  content: '';
  @apply w-full block;
  @apply border-b border-secondary-200;

  .bg--secondary-50 & {
    @apply border-secondary-300;
  }
}

.separator--xl {
  &::before {
    @apply w-full block;
    @apply h-4 md:h-5 lg:h-6;
  }
  &::after {
    content: '';
    @apply w-full block;
    @apply h-4 md:h-5 lg:h-6;
  }
}

.separator--md {
  &::before {
    @apply w-full block;
    @apply h-2 md:h-3 lg:h-4;
  }
  &::after {
    content: '';
    @apply w-full block;
    @apply h-2 md:h-3 lg:h-4;
  }
}

.separator--negative::before {
  @apply border-secondary-400;
}

.separator--vertical {
  @apply inline border-b-0 border-r border-secondary-400 mx-4;

  & + .btn--bare {
    @apply -ml-2;
  }
}
